<template>
    <div>
      <h1 :style="timeStyle">{{ formattedTime }}</h1>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        currentTime: new Date(),
        // brightness: 1,
        timer: null,
        // colorChangeTimer: null,
      };
    },
    computed: {
      formattedTime() {
        const year = this.currentTime.getFullYear();
        const month = String(this.currentTime.getMonth() + 1).padStart(2, '0');
        const day = String(this.currentTime.getDate()).padStart(2, '0');
        const hours = String(this.currentTime.getHours()).padStart(2, '0');
        const minutes = String(this.currentTime.getMinutes()).padStart(2, '0');
        const seconds = String(this.currentTime.getSeconds()).padStart(2, '0');
        return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
      },
      timeStyle() {
        const baseColor = '#C0C0C0';
        // const adjustedColor = this.adjustBrightness(baseColor, this.brightness);
        return {
          fontFamily: '"Inter", sans-serif',
          fontSize: '4em',
          fontWeight: '550',
          // color: adjustedColor
          color: baseColor
        };
      },
    },
    methods: {
      // adjustBrightness(color, factor) {
      //   let hexColor = color.replace('#', '');
      //   if (hexColor.length === 3) {
      //     hexColor = hexColor.split('').map(c => c + c).join('');
      //   }
      //   let r = parseInt(hexColor.substr(0, 2), 16);
      //   let g = parseInt(hexColor.substr(2, 2), 16);
      //   let b = parseInt(hexColor.substr(4, 2), 16);
      //   r = Math.max(Math.min(255, Math.round(r * factor)), 0);
      //   g = Math.max(Math.min(255, Math.round(g * factor)), 0);
      //   b = Math.max(Math.min(255, Math.round(b * factor)), 0);
      //   return '#' + ('00' + r.toString(16)).substr(-2) + ('00' + g.toString(16)).substr(-2) + ('00' + b.toString(16)).substr(-2);
      // },
    },
    mounted() {
      this.timer = setInterval(() => {
        this.currentTime = new Date();
      }, 1000);
  
      // this.colorChangeTimer = setInterval(() => {
      //   this.brightness += 0.05;
      //   if (this.brightness >= 1.5) {
      //     this.brightness = 0.5;
      //   }
      // }, 100);
    },
    beforeDestroy() {
      clearInterval(this.timer);
      // clearInterval(this.colorChangeTimer);
    },
  };
  </script>